<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="基本按钮">
        <ph-button-group :container="true">
          <ph-button type="primary">基本</ph-button>
          <ph-button type="success">成功</ph-button>
          <ph-button type="warning">警告</ph-button>
          <ph-button type="danger">危险</ph-button>
          <ph-button type="dark">暗色</ph-button>
          <ph-button type="light">默认</ph-button>
          <ph-button type="golden">金色</ph-button>
        </ph-button-group>
        <ph-pretty lang="html">{{ basicBtn }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="naked按钮">
        <ph-button-group :container="true">
          <ph-button icon="chrome" title="chrome" :naked="true"></ph-button>
          <ph-button icon="safari" title="safari" :naked="true"></ph-button>
          <ph-button icon="firefox" title="firefox" :naked="true"></ph-button>
          <ph-button
            icon="internet-explorer"
            title="internet"
            :naked="true"
          ></ph-button>
          <ph-button icon="safari" title="safari" :naked="true"></ph-button>
          <ph-button icon="chrome" title="chrome" :naked="true"></ph-button>
        </ph-button-group>
        <ph-pretty lang="html">{{ nakedBtn }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="mini按钮">
        <ph-button-group :container="true">
          <ph-button :mini="true" type="primary">基本</ph-button>
          <ph-button :mini="true" type="success">成功</ph-button>
          <ph-button :mini="true" type="warning">警告</ph-button>
          <ph-button :mini="true" type="danger">危险</ph-button>
          <ph-button :mini="true" type="light">默认</ph-button>
          <ph-button :mini="true" type="golden">金色</ph-button>
        </ph-button-group>
        <ph-pretty lang="html">{{ miniBtn }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="disabled按钮">
        <ph-button-group :container="true">
          <ph-button :disabled="true" type="primary">基本</ph-button>
          <ph-button :disabled="true" type="success">成功</ph-button>
          <ph-button :disabled="true" type="warning">警告</ph-button>
          <ph-button :disabled="true" type="danger">危险</ph-button>
          <ph-button :disabled="true" type="dark">暗色</ph-button>
          <ph-button :disabled="true">默认</ph-button>
          <ph-button :disabled="true" type="golden">金色</ph-button>
        </ph-button-group>
        <ph-pretty lang="html">{{ disabledBtn }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="radius按钮">
        <ph-button-group :container="true">
          <ph-button :radius="true" type="primary">基本</ph-button>
          <ph-button :radius="true" type="success">成功</ph-button>
          <ph-button :radius="true" type="warning">警告</ph-button>
          <ph-button :radius="true" type="danger">危险</ph-button>
          <ph-button :radius="true">默认</ph-button>
          <ph-button :radius="true" type="golden">金色</ph-button>
        </ph-button-group>
        <ph-pretty lang="html">{{ radiusBtn }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="icon按钮">
        <ph-button-group :container="true">
          <ph-button icon="chrome" type="primary">基本</ph-button>
          <ph-button icon="safari" type="success">成功</ph-button>
          <ph-button icon="firefox" type="warning">警告</ph-button>
          <ph-button icon="internet-explorer" type="danger">危险</ph-button>
          <ph-button icon="safari">默认</ph-button>
          <ph-button icon="chrome" type="golden">金色</ph-button>
        </ph-button-group>
        <ph-pretty lang="html">{{ iconBtn }}</ph-pretty>
        <ph-button-group :container="true">
          <ph-button iconRight="chrome" type="primary">基本</ph-button>
          <ph-button iconRight="safari" type="success">成功</ph-button>
          <ph-button iconRight="firefox" type="warning">警告</ph-button>
          <ph-button iconRight="internet-explorer" type="danger"
            >危险</ph-button
          >
          <ph-button iconRight="safari">默认</ph-button>
          <ph-button iconRight="chrome" type="golden">金色</ph-button>
        </ph-button-group>
        <ph-pretty lang="html">{{ iconRightBtn }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="块按钮">
        <ph-button-group :container="true">
          <ph-button :block="true" type="primary">基本</ph-button>
          <ph-button :block="true" type="success">成功</ph-button>
          <ph-button :block="true" type="warning">警告</ph-button>
          <ph-button :block="true" type="danger">危险</ph-button>
          <ph-button :block="true">默认</ph-button>
          <ph-button :block="true" type="golden">金色</ph-button>
        </ph-button-group>
        <ph-pretty lang="html">{{ blockBtn }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="左右分布按钮">
        <ph-button-group :container="true">
          <ph-button type="primary">基本</ph-button>
          <ph-button type="success">成功</ph-button>
          <ph-button type="warning">警告</ph-button>
          <ph-button type="danger">危险</ph-button>
          <ph-button>默认</ph-button>
          <ph-button type="golden">金色</ph-button>
        </ph-button-group>
        <ph-button-group :container="true" justify="center">
          <ph-button type="primary">基本</ph-button>
          <ph-button type="success">成功</ph-button>
          <ph-button type="warning">警告</ph-button>
          <ph-button type="danger">危险</ph-button>
          <ph-button>默认</ph-button>
          <ph-button type="golden">金色</ph-button>
        </ph-button-group>
        <ph-button-group :container="true" justify="flex-end">
          <ph-button type="primary">基本</ph-button>
          <ph-button type="success">成功</ph-button>
          <ph-button type="warning">警告</ph-button>
          <ph-button type="danger">危险</ph-button>
          <ph-button>默认</ph-button>
          <ph-button type="golden">金色</ph-button>
        </ph-button-group>
        <ph-button-group :container="true">
          <ph-button icon="chrome" type="primary">基本</ph-button>
          <ph-button icon="safari" type="success">成功</ph-button>
          <ph-button icon="internet-explorer" type="warning">警告</ph-button>
          <ph-button icon="opera">默认</ph-button>
        </ph-button-group>
        <ph-button-group :container="true" justify="center">
          <ph-button icon="chrome" type="primary">基本</ph-button>
          <ph-button icon="safari" type="success">成功</ph-button>
          <ph-button icon="internet-explorer" type="warning">警告</ph-button>
          <ph-button icon="opera">默认</ph-button>
        </ph-button-group>
        <ph-button-group :container="true" justify="flex-end">
          <ph-button icon="chrome" type="primary">基本</ph-button>
          <ph-button icon="safari" type="success">成功</ph-button>
          <ph-button icon="internet-explorer" type="warning">警告</ph-button>
          <ph-button icon="opera">默认</ph-button>
        </ph-button-group>
        <ph-pretty lang="html">{{ alignBtn }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ basicUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { PhButton, PhButtonGroup, PhTab, PhTabPanel, PhView } from "@/index";
import * as Btns from "../data/button";
export default defineComponent({
  components: { PhButtonGroup, PhButton, PhTab, PhTabPanel, PhView },
  setup() {
    return {
      ...Btns,
    };
  },
});
</script>
